<template>
  <div style="width:100vw;" class="study-center">
    <!-- <div class="study-header">
      <mt-header fixed title="学习中心">
        <router-link to="/" slot="left">
          <mt-button @click="backHome" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <div class="bscroll" ref="bscroll">
      <div class="bscroll-container">
        <div class="study-body">
          <!-- <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        @top-status-change="handleTopChange"
        ref="loadmore"
          >-->
          <div v-if="lunboImg.length > 0" style="position:relative;" class="banner">
            <mt-swipe :auto="4000">
              <mt-swipe-item v-for="(item,index) in lunboImg" :key="index">
                <div class="img-label">{{item.title}}</div>
                <img :src="item.photo" alt="banner1" />
              </mt-swipe-item>
              <!-- <mt-swipe-item>
                <img src="@/assets/homePicture/banner3.jpg" alt="banner1" />
              </mt-swipe-item>
              <mt-swipe-item>
                <img src="@/assets/homePicture/banner2.jpg" alt="banner1" />
              </mt-swipe-item>-->
            </mt-swipe>
          </div>
          <div v-else style="position:relative;" class="banner">
            <img src="@/assets/homePicture/banner1.jpg" alt="banner1" />
          </div>
          <div v-for="items in list" :key="items.id" class="class-box">
            <div class="notice-box">
              <div class="notice row-flex">
                <span class="icon-rectangle"></span>
                <span>{{items.title}}</span>
              </div>
            </div>
            <div class="menu-box">
              <ul style="flex-wrap:wrap;" class="item-box row-flex">
                <li
                  @click="goItem(obj.name)"
                  v-for="obj in (items.item)"
                  :key="obj.id"
                  class="item"
                >
                  <div style="position:relative;" class="colum-flex">
                    <div v-if="(obj.id == 7 && Teabadge)" class="badge">{{Teabadge}}</div>
                    <div v-if="(obj.id == 8 && Stubadge)" class="badge">{{Stubadge}}</div>
                    <span class="picture-box menu-size">
                      <img :src="require('@/assets/studyCenter/'+obj.picture+'.png')" />
                    </span>
                    <span>{{obj.text}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="class-box">
            <div class="notice-box">
              <div
                style="background-color:#EAEAEA;padding:5px 0 10px 10px;"
                class="notice row-flex"
              >
                <span class="icon-rectangle"></span>
                <span>年度培训计划</span>
              </div>
            </div>
          </div>
          <div class="class-box">
            <div class="train-box">
              <div
                v-show="index < 2"
                v-for="(item,index) in qryPlanPCResult"
                :key="index"
                class="train-video-box"
              >
                <div class="train-video-head row-flex">
                  <div class="vide-head-img">
                    <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                    <div class="iconfont iconxinfeng2 plan-icon"></div>
                  </div>
                  <div style="flex:1 0 auto;">
                    <div class="vide-head-text1">{{item.planName}}</div>
                    <div class="vide-head-text2">年份：{{item.planYear}}</div>
                    <div style="justify-content:space-between;" class="row-flex">
                      <div class="vide-head-text3">上传时间：{{item.updateTime}}</div>
                      <div @click="getMediaFromDing(item)">
                        <a style="color:#4787E4;">
                          <i style="margin-right:5px;" class="iconfont iconxiazai"></i>
                          <span>下载</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="train-video-footer row-flex">
                  <div>
                    <!-- <i style="margin-right:5px;" class="iconfont iconxingming"></i>
                    <span>5</span>-->
                  </div>
                  <!-- <div>
                    <a :href="item.filePath">
                      <i style="margin-right:5px;" class="iconfont iconxiazai"></i>
                      <span>下载</span>
                    </a>
                  </div>-->
                </div>
              </div>
            </div>
          </div>
          <div @click="seeMore" class="class-box">
            <div class="see-more">查看更多</div>
          </div>
          <!-- <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">Loading...</span>
          </div>-->
          <!-- </mt-loadmore> -->
        </div>
      </div>
    </div>
    <div class="home-footer">
      <mt-tabbar fixed v-model="selectedTab">
        <mt-tab-item id="Home">
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon icontianchongxing-"></div>
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png"  v-if="this.selected == 'Home'"/> -->
          首页
        </mt-tab-item>
        <mt-tab-item id="StudyCenter">
          <!-- <img slot="icon" src="@/assets/homePicture/home2.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconwenti-shuben"></div>学习
        </mt-tab-item>
        <mt-tab-item id="Growup">
          <!-- <img slot="icon" src="@/assets/homePicture/home3.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconxinfeng2"></div>成长
        </mt-tab-item>
        <mt-tab-item id="Things">
          <!-- <img slot="icon" src="@/assets/homePicture/home4.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconrili"></div>办事
        </mt-tab-item>
        <mt-tab-item id="TalentIntroduce">
          <div slot="icon" class="iconfont home-tab-icon iconweibiaoti--"></div>优才
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setTimeout } from "timers";
import { Toast } from "mint-ui";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
import  { Dinpan }  from "../../untils/dinpan";
export default {
  name: "Home",
  props: ["number"],
  data() {
    return {
      lunboImg: [],
      qryPlanPCResult: [],
      roleList: [], // 权限控制
      selectedTab: "StudyCenter",
      teacherList: "", // 判断是否有导师
      studentList: "", // 判断是否有学生
      Teabadge: "",
      Stubadge: "",
      msg: "xffya",
      selected: "学习",
      bgcolor: "#4BDBFF",
      allLoaded: "",
      topStatus: "",
      list: [
        {
          id: 1,
          title: "我要开课 ",
          item: [
            {
              id: 1,
              picture: "study-pencile",
              text: "申请开课",
              name: "addClass"
            },
            {
              id: 2,
              picture: "study-approval",
              text: "开课审批",
              name: "applyClass"
            },
            { id: 3, picture: "study-book2", text: "我的课程", name: "myClass" }
          ]
        },
        {
          id: 2,
          title: "我要上课 ",
          item: [
            {
              id: 4,
              picture: "study-bord",
              text: "课程公告",
              name: "classList"
            },
            { id: 5, picture: "study-pad", text: "我的课程", name: "goClass" },
            {
              id: 6,
              picture: "study-apply",
              text: "课程申请",
              name: "classApply"
            }
          ]
        },
        {
          id: 3,
          title: "导师带徒  ",
          item: [
            {
              id: 7,
              picture: "study-teacher",
              text: "我的导师",
              name: "myTeacher"
            },
            {
              id: 8,
              picture: "study-men",
              text: "我的徒弟",
              name: "myApprentice"
            },
            {
              id: 9,
              picture: "study-jia",
              text: "我要选导师",
              name: "chooseTeacher"
            },
            {
              id: 10,
              picture: "study-jia",
              text: "徒弟审核",
              name: "apprenticeApply"
            }
          ]
        },
        {
          id: 4,
          title: "讲师及课程中心  ",
          item: [
            {
              id: 11,
              picture: "study-instert",
              text: "内部讲师",
              name: "teacherList"
            },
            {
              id: 12,
              picture: "study-wai",
              text: "外部讲师",
              name: "teacherList1"
            },
            {
              id: 13,
              picture: "study-class",
              text: "课程中心",
              name: "classCenter"
            }
          ]
        }
      ]
    };
  },
  computed: {
    src: function() {
      return require("@/assets/studyCenter/study-apply.png");
    }
  },
  watch: {
    selectedTab(before, after) {
      this.$router.push({
        path: before,
        query: { dd_nav_bgcolor: "FFFE5824" }
      });
    }
  },
  methods: {
    seeMore(){
      this.$router.push({
        path:'/plan'
      })
    },
    plans() {
      Toast({
        className: "z-index",
        message: "敬请期待",
        duration: 2000
      });
    },
    loadTop() {
      // 上拉加载
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 2000);
    },
    handleTopChange(status) {
      console.log(status);
      this.topStatus = status;
    },
    getMediaFromDing(params){
      Dinpan.getMediaFromDing(params,this)
    },
    loadBottom() {
      // 下拉加载
      this.allLoaded = true; // 若数据已全部获取完毕
      this.$refs.loadmore.onBottomLoaded();
    },
    goItem(e) {
      let that = this;
      let roleList = that.roleList;
      let roleControl = false;
      async function wtf() {
        // 路由跳转
        if (e == "myTeacher") {
          if (that.Teabadge) {
            that.$router.push({
              path: e,
              query: { dd_nav_bgcolor: "FFFE5824", cancleFlag: 2 }
            });
          }
          let res = await that.$get("qryTeacherByStudentId");
          if (res.success) {
            if (!res.data) {
              that.teacherList = 0;
            } else {
              that.teacherList = res.data;
            }
          }
          if (!that.teacherList) {
            Toast({
              message: "您还没有导师",
              duration: 2000
            });
            return;
          }
        }
        if (e == "myApprentice") {
          if (that.Stubadge) {
            that.$router.push({
              path: e,
              query: { dd_nav_bgcolor: "FFFE5824", cancleFlag: 2 }
            });
            return;
          }
          let res = await that.$get("qryStudentsByTeacherId");
          console.log(res);
          if (res.success) {
            if (res.data.length == 0) {
              that.studentList = 0;
            } else {
              that.studentList = res.data;
            }
          }
          if (!that.studentList) {
            Toast({
              message: "您还没有徒弟",
              duration: 2000
            });
            return;
          }
        }
        if (e == "applyClass") {
          if (!roleList) {
            Toast({
              message: "权限获取失败",
              duration: 2000
            });
          }
          roleList.map(item => {
            if (item.id == 1 || item.id == 2) {
              roleControl = true;
            }
          });
          if (!roleControl) {
            Toast({
              message: "您不是管理员",
              duration: 2000
            });
            return;
          }
        }
        that.$router.push({ path: e, query: { dd_nav_bgcolor: "FFFE5824" } });
      }
      wtf();
    }
  },
  created() {
    this.$get("qryCourseListForCarousel").then(res => {
      if (res.success) {
        this.lunboImg = res.data;
      }
    });
  },
  mounted() {
    // 初始化标题文字
    setText("学习中心");
    let that = this;
    let countTeacher = function() {
      return that.$http.get("/teacher/countTeacher");
    };
    let countStudents = function() {
      return that.$http.get("/teacher/countStudents");
    };
    // better-scroll初始化
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    that.$http
      .all([countTeacher(), countStudents()])
      .then(
        that.$http.spread(function(first, second) {
          if (first.data.success) {
            that.Teabadge = first.data.data;
          }
          if (second.data.success) {
            that.Stubadge = second.data.data;
          }
          // console.log(first, second);
        })
      )
      .catch(res => {
        Toast({
          message: "请求失败",
          duration: 2000
        });
      });

    this.roleList = JSON.parse(localStorage.getItem("role"));
    let planParams = {
      planName: "",
      planYear: "",
      page: 1,
      pageSize: 100
    };
    this.$post("qryPlanPCResult", planParams).then(res => {
      if (res.success) {
        let plans = res.data.plans;
        plans.map(function(item) {
          for (var key in item) {
            if (key == "updateTime") {
              item[key] = easydate(item[key]).format("yyyy-MM-dd");
            }
          }
        });
        this.qryPlanPCResult = plans;
      }
    });
    console.log(this.roleList);
  }
  // beforeRouteEnter(to, from, next) {
  //   // ...
  //   console.log(to, from);
  //   next();
  // }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/study-center.less");
.img-label{
  position: absolute;
  left: 40/75rem;
  width: 300/75rem;
  bottom: 50/75rem;
  padding: 10/75rem 30/75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: #ffffff;
  border-radius: 30px;
  background-color: rgba(0,0,0,0.4);
}
.home-tab-icon {
  padding-top: 2px !important;
}
.badge {
  position: absolute;
  top: 0;
  right: 29px;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  font-size: 10px;
  color: #ffffff;
  border-radius: 50%;
  background-color: red;
}
.bscroll-container {
  padding-bottom: 55px;
}
</style>

